<template>
  <div class="page">
    <assets-head title="KYC" style="background-color: #171a1e;" :showLeft="falsea"/>

    <div class="flow-wrap">
      <!--  -->
      <div v-if="activeFlop === 0" class="form">
        <div class="form-item mb-80">
          <div class="label required">居住国家地区</div>
          <van-field placeholder="请输入您的电子邮件" />
        </div>

        <div class="form-item">
          <div class="label required">身份证类型</div>
          <van-button>身份证</van-button>
        </div>
      </div>aaaaaaaaaa

      <!--  -->
      <div v-if="activeFlop === 1" class="form flow2">
        <div class="title">
          <div>输入您的个人信息</div>
          <div>确保所有信息与您的身份证件一致</div>
        </div>


        <div class="form-item mb-80">
          <div class="label required">居住国家地区</div>
          <van-field placeholder="请输入您的姓名" />
        </div>

        <div class="form-item">
          <van-field placeholder="请输入出生日期" />
        </div>

        <div class="form-item">
          <van-field placeholder="请输入身份证号码" />
        </div>

        <div class="form-item">
          <div class="label required">身份证类型</div>
          <van-button>身份证</van-button>
        </div>
      </div>

      <!--  -->
      <div v-if="activeFlop === 2" class="form flow3">
        <div class="title">拍摄政府签发的身份证正反面的照片</div>
        <img src="@/assets/image 2004.png" alt="">
        <div class="details">
          <p>上传您的身份证件的完整图像。</p>
          <p>请确保身份证件上的所有信息清晰可见。</p>
          <p>去宝盖文件是原件并且美元过期</p>
          <p>将文档放置在纯色背景上</p>
        </div>
      </div>

      <div v-if="activeFlop === 3" class="form flow3 flow4">
        <div class="title">拍摄政府签发的身份证正反面的照片</div>
        <img src="@/assets/Group 8243.png" alt="">
        <img src="@/assets/Group 8242.png" alt="">
        <div class="details">
          <p>请上传不大于10M的jpg/.jpeg/.png图片</p>
        </div>
      </div>
      <div v-if="activeFlop === 3" class="hint">信息仅用于身份验证，平台保障您的信息安全</div>
      <van-button class="next-btn" @click="handleNext">下一个</van-button>
    </div>

  </div>
</template>

<script>
import AssetsHead from "@/components/assets-head/index.vue";
export default {
  name: 'KYC',
  components: { AssetsHead },
  data() {
    return {
      activeFlop: 0
    }
  },
  methods: {
    handleNext() {
      if (this.activeFlop === 3) {
        return
      }
      this.activeFlop++;
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .van-nav-bar {
  background-color: #171a1e;

  * {
    color: #fff !important;
  }
}

.flow-wrap {
  padding: 40px;
}

.form {
  .form-item {
    margin-bottom: 40px;

    .label {
      margin-bottom: 10px;
      font-size: 26px;
    }

    .required {
      position: relative;

      &::before {
        content: '*';
        color: #ff4444;
        margin-left: 5px;
        position: absolute;
        left: -20px;
        font-weight: bold;
      }
    }

    /deep/ input {
      border: 1px solid #94959b;
      border-radius: 99px;
      padding: 10px 20px;
      padding-top: 6px;
    }
  }
}

.van-button {
  width: 100%;
  border-radius: 99px;
  padding: 10px 20px;
  border: 1px solid #94959b;
  height: 80px;
  color: #000;
}

.next-btn {
  color: #fff;
  background-color: #000000;
  margin-top: 60px;
}

.flow2 {
  >.title {
    margin-bottom: 60px;

    >div:first-child {
      font-size: 46px;
      margin-bottom: 20px;
    }

    >div:last-child {
      font-size: 26px;
    }
  }
}

.flow3 {
  text-align: center;

  .title {
    text-align: left;
  }

  .details {
    p {
      text-align: left;
      font-size: 26px;
      margin-bottom: 20px;
    }
  }
}

.flow4 {
  img {
    margin: 30px 0;
  }
}


.hint {
  font-size: 22px;

  transform: translate(30px, 50px);
}
</style>